<script>
import UserApi from "../../api/user";
import { mapStores } from "pinia";
import { useUserStore } from "../../stores/user";

export default {
  data() {
    return {
      user: {}
    };
  },
  methods: {
    async getUserInfo() {
      try {
        let userId = this.userStore.userData.userId;
        const api = new UserApi();
        let res = await api.find(userId);
        this.user = res.data;
        console.log(this.user);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    }
  },
  computed: {
    ...mapStores(useUserStore),
    lastLoginTime() {
      return new Date(this.user.lastLoginTime).toLocaleString();
    }
  },
  mounted() {
    this.getUserInfo();
  }
};
</script>

<template>
  <div class="user-profile">
    <div class="header">
      <h2>用户信息</h2>
      <p>
        <!-- <a class="button" href="javascript:void(0);">编辑</a> -->
        <router-link class="button" :to="'/user/change-profile/' + user.id">
          修改个人信息</router-link
        >
        <router-link class="button" :to="'/user/change-password/' + user.id"> 修改密码</router-link>
        <a class="button" href="javascript:void(0);" @click="$goBack">返回</a>
      </p>
    </div>
    <div class="block">
      <fieldset>
        <legend>
          <img :src="user.fullAvatar" :alt="user.username" />
          <span>个人信息</span>
        </legend>
        <dl>
          <dt>用户名</dt>
          <dd>{{ user.username }}</dd>
        </dl>
        <dl>
          <dt>昵称</dt>
          <dd>{{ user.nickname }}</dd>
        </dl>
        <dl>
          <dt>姓名</dt>
          <dd>{{ user.truename }}</dd>
        </dl>
        <dl>
          <dt>用户组</dt>
          <dd>{{ user.roleName }}</dd>
        </dl>
        <dl>
          <dt>上次登录时间</dt>
          <dd>{{ lastLoginTime }}</dd>
        </dl>
        <dl>
          <dt>上次登录IP</dt>
          <dd>{{ user.lastLoginIp }}</dd>
        </dl>
        <dl>
          <dt>登录次数</dt>
          <dd>{{ user.loginCount }}</dd>
        </dl>
      </fieldset>
    </div>
  </div>
</template>

<style scoped>
fieldset {
  padding: 10px;
  margin: 10px auto;
  width: 100%;
  color: #333;
  border: #06c dashed 1px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  box-sizing: border-box;
}

legend {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #06c;
  font-weight: 800;
  background: #fff;
  border: #06c solid 1px;
  padding: 3px 6px;
}

legend img {
  width: 32px;
  height: 32px;
}

dl {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  min-width: 33.33333333%;
}

dl dt {
  background: #5f9be3;
  color: #fff;
  float: left;
  font-weight: bold;
  margin-right: 10px;
  padding: 5px;
  width: 50%;
}

dl dd {
  margin: 2px 10px 2px 0;
  padding: 5px;
  border-bottom: 1px solid #a5a5a5;
  width: 100%;
}
</style>
